<!--进度环-->
<template>
    <div class='container'>
        <div :id="progressChartId"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    props: {
        dataVColor: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            progressChartId: "1",
        };
    },
    methods: {
        //创建进度环
        async createProgressChart(chartData) {
            this.progressChartId = chartData.id
            await (this.progressChart && this.progressChart.dispose());//若之前有，则销毁实例
            this.progressChart = echarts.init(document.getElementById(chartData.id));//初始化echarts
            let option = {
                title: {
                    text: '\n{a|' + chartData.name + '}',
                    x: 'center',
                    y: '65%',
                    bottom: "0",
                    textStyle: {
                        color: "#ffffff",
                        rich: {
                            a: {
                                fontSize: 15,
                                fontWeight: 900
                            },
                        }
                    }
                },
                series: [
                    {
                        type: 'gauge',
                        radius: '86%',//仪表盘半径
                        center: ['50%', '45%'],//仪表盘位置
                        splitNumber: 5,
                        animationDuration: 3000,
                        animationEasing: "cubicInOut",
                        axisLine: {
                            lineStyle: {
                                width: 15,
                                color: [
                                    [1, new echarts.graphic.LinearGradient(1, 1, 0, 1, [
                                        {
                                            offset: 0,
                                            color: this.dataVColor[1]
                                        },
                                        {
                                            offset: 1,
                                            color: "#aaa"
                                        }
                                    ])]
                                ]
                            }
                        },
                        //指针
                        pointer: {
                            width: 3,
                            length: '70%',
                        },
                        //小刻度
                        axisTick: {
                            length: 5,
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        },
                        //大刻度
                        splitLine: {
                            show: false,
                            length: 10,
                            lineStyle: {
                                color: '#fff',
                                width: 2
                            }
                        },
                        //刻度标签
                        axisLabel: {
                            color: '#fff',
                            distance: 5,
                            fontSize: 8,
                            fontWeight: 900,
                        },
                        detail: {
                            valueAnimation: false,
                            formatter: '{value}%',
                            color: '#fff',
                            fontSize: 15,
                            fontWeight: 900,
                            padding: [30, 0, 0, 0]
                        },
                        data: [
                            {
                                value: chartData.value
                            }
                        ]
                    }
                ]
            };
            await (option && this.progressChart.setOption(option));//设置数据
        }
    },
};
</script>
<style scoped lang='scss'>
.container {
    height: 100%;
    width: 100%;

    div {
        height: 100%;
        width: 100%;
    }
}
</style>